<template>
  <my-input
    type="number"
    v-model="code"
    placeholder="请输入短信验证码"
    @input="handleChange">
    <i class="msgcode-icon icon"></i>
    <button type="button" class="codeBtn" slot="button" @click="sendSms" ref="codeBtn" :disabled="disabled">获取验证码</button>
  </my-input>
</template>

<script>
import myInput from '../input'
import { sendSms } from '../../../../api/index.js'

export default {
  components: {
    myInput
  },
  props: {
    mobile: {
      type: String
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      seconds: 60,
      timer: null,
      code: '',
      disabled: false
    }
  },
  methods: {
    handleChange (val) {
      this.$emit('input', val)
    },
    formatDate () {
      var date = new Date()
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD + ' ' + hh + mm + ss
    },
    sendSms () {
      if (this.seconds < 60) {
        this.$toastText('请在' + this.seconds + '秒后再发送！')
        return false
      }
      if (this.mobile.length <= 0) {
        this.$toastText('请先输入手机号！')
        return false
      }
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile)) {
        this.$toastText('手机号格式错误！')
        return false
      }
      this.disabled = true

      sendSms(this.mobile, this.type).then(res => {
        if (res && res.code === 200) {
          this.$toastText('短信发送成功，请注意查收！')
          this.timer = setInterval(() => {
            this.seconds--
            this.$refs.codeBtn.innerHTML = this.seconds + '秒'
            if (this.seconds === -1) {
              this.seconds = 60
              this.disabled = false
              this.$refs.codeBtn.innerHTML = '获取验证码'
              clearInterval(this.timer)
            }
          }, 1000)
        } else {
          this.disabled = false
        }
      })
    }
  },
  watch: {
    code (val) {
      this.$emit('input', val)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../assets/css/pub";

  .codeBtn {
    padding: .15rem .35rem;
    background: $default_red_color;
    color: #fff;
    border-radius: .125rem;
    border: 0;
    font-size: $default_font_size;
    flex: none;

    &:disabled {
      background: $default_disabled_background_color;
    }
  }
</style>
